<template>
	<div class="box">
		<!-- 新增牛奶 管理员显示 -->
		<div class="zhezhao" id="zhezhao" v-if="selectedShow" @click="selectedShow = false"></div>
		<div class="jiaBox" v-if="selectedShow">
			<div>请选择派送星期</div>
			</view>
			<view class="uni-list">
				<checkbox-group @change="checkboxChange">
					<label class="uni-list-cell uni-list-cell-pd" style="display: flex;margin-top: 5px;"
						v-for="item in items" :key="item.value">
						<view>
							<checkbox :value="item.value" :checked="item.checked" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</checkbox-group>
			</view>
		</div>
		<div
			style="height: 90%;width: 100%;overflow: scroll;background-color: #fff;padding: 5px;box-sizing: border-box;border-radius: 5px;box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4);">
			<span>基本信息</span>
			<div style="height:10px"></div>
			<!-- <input type="text" placeholder="客户名称" v-model="userName" :disabled="isDetail">
			<input type="text" placeholder="客户电话" v-model="userPhone" :disabled="isDetail"> -->
			<input type="text" placeholder="客户地址" v-model="userSite">
			

			<picker @change="changeArea" :value="index" :range="siteArray">
				<!-- <button type="primary" style="width: 100%;">请选择区域</button> -->
				<div style="width: 100%;height: 50px;display: flex;align-items: center;border-bottom: 2px solid #eee;padding-left: 5px;box-sizing: border-box;">配送区域：{{siteArea ? siteArea:"请选择区域"}}</div>
			</picker>

			<picker mode="date" :value="startTime" start="2022-09-01" end="2077-09-01" :disabled="isDetail"
				@change="bindDateChange">
				<view class="picker">
					选择开始时间: {{startTime || '点击选择'}}
				</view>
			</picker>
			<picker mode="date" :value="endTime" start="2022-09-01" :disabled="isDetail" end="2077-09-01"
				@change="bindDateChangeEnd">
				<view class="picker">
					选择结束时间: {{endTime || '点击选择'}}
				</view>
			</picker>

			<view style="display: flex;border-bottom: 2px solid #f1f1f1;height: 50px; align-items: center;">
				<div style="padding: 10px 5px;color: #333333;">是否为APP：</div>
				<view class="uni-list">
					<radio-group @change="isAPPChange">
						<label style="margin: 5px;">
							<span>
								<radio style="" value="0" lable="否" :checked="isAPP == 0" />
							</span>
							<span style="font-size: 0.8rem;">否</span>
						</label>
						<label style="margin: 5px;">
							<span>
								<radio style="" value="1" lable="是" :checked="isAPP == 1" />
							</span>
							<span style="font-size: 0.8rem;">是</span>
						</label>
					</radio-group>
				</view>
			</view>

			<view>
				<div style="padding: 10px 5px;color: #333333;">请选择派送日</div>
				<view class="uni-list">
					<radio-group @change="radioChange"
						style="display: flex;flex-direction: column;border-bottom: 2px solid #f1f1f1;">
						<label v-for="(item, index) in distributionTime" :key="item.value" style="margin: 5px;">
							<span>
								<radio style="" :value="item.value" :lable="item.name" :checked="index === selected" />
							</span>
							<span style="font-size: 0.8rem;">{{item.name}}</span>
							<span v-if="item.value == 5 " style="margin-left: 10px;font-size: 0.6rem;"
								@click="selectedShow = true">查看</span>
						</label>
					</radio-group>
				</view>
			</view>

			<div style="height:10px"></div>
			<span>客户需求</span>
			<div style="height:10px"></div>
			<picker @change="bindPickerChange" :value="index" :disabled="isDetail" :range="array" mode="multiSelector">
				<view class="picker" style="border: none;">
					<button type="primary" style="width: 100%;">点击添加送奶种类及数量</button>
				</view>
			</picker>
			<div style="height:10px"></div>
			<div style="height:10px"></div>
			<ul class="list">
				<li v-for="(item,index) in kindArray"><span>{{item.name}}</span><span>{{item.number}}瓶</span><span
						@click="del(index)">删除</span></li>
				<div v-if="kindArray.length == 0"
					style='text-align: center;position: absolute;top: 50%;left: 50%;transform: translate(-50% , -50%);'>
					暂无种类</div>
			</ul>

		</div>
		<div class="footer">
			<button v-if="id != 'undefind' && !isDetail" type="primary" @click="seaveOrEdit">修改</button>
			<button v-if="id == 'undefind' && !isDetail" type="primary" @click="seaveOrEdit">确定新增</button>
			<button v-if="isDetail" type="">取消</button>
		</div>

		<!-- 预处理按钮 -->
		<liu-drag-button bottomPx="100" @clickBtn="clickBtn()">预</liu-drag-button>
		<cus-popup position="bottom" :zIndex="100" v-model="visible" :allowMarkClose="allowMarkClose"
			popup-wrap-custom="custom-pop">
			<view class="mark">
				<picker mode="date" :value="startTime" start="2022-09-01" end="2077-09-01" :disabled="isDetail"
					@change="bindDateChangeExecute">
					<view class="makeAnAppointment">
						执行时间: {{mkObj.executeTime || '点击选择'}}
					</view>
				</picker>

				<!-- 请选择预处理状态 -->
				<view style="display: flex;border-bottom: 2px solid #f1f1f1;height: 50px; align-items: center;">
					<div style="padding: 10px 5px;color: #333333;">执行事件：</div>
					<view class="uni-list">
						<radio-group @change="isincident">
							<label style="margin: 5px;">
								<span>
									<radio style="" value="0" lable="否" :checked="mkObj.incident == 0" />
								</span>
								<span style="font-size: 0.8rem;">区间停止</span>
							</label>
							<label style="margin: 5px;">
								<span>
									<radio style="" value="1" lable="是" :checked="mkObj.incident == 1" />
								</span>
								<span style="font-size: 0.8rem;">修改</span>
							</label>
						</radio-group>
					</view>
				</view>

				<!-- 选择时间区间 -->
				<div v-if="mkObj.incident == 0"
					style="display: flex; justify-content: space-between;align-items: center;">
					<picker mode="date" style="width: 95%;" :value="startTime" start="2022-09-01" end="2077-09-01"
						@change="stopTime2">
						<view class="stopTime">
							{{mkObj.endStop || '执行停止时间'}}
						</view>
					</picker>
				</div>

				<div v-if="mkObj.incident == 1">
					<!-- 配送日 -->
					<view>
						<div style="padding: 10px 5px;color: #333333;">请选择派送日</div>
						<view class="uni-list">
							<radio-group @change="radioChange1"
								style="display: flex;flex-direction: column;border-bottom: 2px solid #f1f1f1;">
								<label v-for="(item, index) in distributionTime" :key="item.value" style="margin: 5px;">
									<span>
										<radio style="" :value="item.value" :lable="item.name"
											:checked="index === mkObj.selected" />
									</span>
									<span style="font-size: 0.8rem;">{{item.name}}

									</span>
								</label>
							</radio-group>
						</view>
					</view>




					<!-- 牛奶品种 -->
					<picker @change="bindPickerChange1" :value="index" :disabled="isDetail" :range="array"
						mode="multiSelector">
						<view class="picker" style="border: none;">
							<button type="primary" style="width: 100%;">点击添加送奶种类及数量</button>
						</view>
					</picker>
					<!-- 牛奶品种列表 -->
					<ul class="list">
						<li v-for="(item,index) in mkObj.kindArray">
							<span>{{item.name}}</span><span>{{item.number}}瓶</span><span @click="del(index)">删除</span>
						</li>
						<div v-if="kindArray.length == 0"
							style='text-align: center;position: absolute;top: 50%;left: 50%;transform: translate(-50% , -50%);'>
							暂无种类</div>
					</ul>
				</div>

				<button type="primary" style="margin-top: 15px;" v-if="!isEdit" @click="addYClick">增加[预]事件</button>
				<button type="primary" style="margin-top: 15px;" v-if="isEdit" @click="editYClick">修改[预]事件</button>
			</view>
		</cus-popup>

		<!-- 查看预处理 -->
		<liu-drag-button bottomPx="0" @clickBtn="clickBtnLook()">
			<div
				style="width: 100%;height: 100%;background-color: #1ba035;border-radius: 50%;display: flex;align-items: center;justify-content: center;">
				查</div>
		</liu-drag-button>
		<cus-popup position="bottom" :zIndex="100" v-model="visibleLook" :allowMarkClose="allowMarkClose"
			popup-wrap-custom="custom-pop">
			<view class="mark">
				<ul>
					<li v-for="(item,index) in beforehandArray">
						<div style="width: 80%;display: flex;flex-direction: column;justify-content: space-between;"
							@click="lookYY(item , index)">
							<p v-if="item.incident == 0">事件：区间停止</p>
							<p v-if="item.incident == 1">事件：修改</p>
							<p>执行时间：{{item.executeTime}}</p>
						</div>
						<div style="width:20%;display: flex;align-items: center;justify-content: center;color: red;font-size: 0.8rem;"
							@click="delYY(index)">
							删除
						</div>
						<!-- <p >执行状态：<span style="color: #1ba035;">{{item.state ? "true" : "false"}}</span></p> -->
					</li>
				</ul>
			</view>
		</cus-popup>


	</div>
</template>

<script>
	import cusPopup from "@/components/cus-popup/popup.vue"
	export default {
		components: {
			cusPopup
		},
		data() {
			return {
				visible: false, //显示弹出层
				// 查看预处理列表弹出层
				visibleLook: false,
				// 需要修改的索引
				editYYIndex: 0,
				isEdit: false, //是否修改
				allowMarkClose: true,
				obj: {},
				array: [
					["请选择牛奶"],
					["请选择数量", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
						25
					]
				],
				siteArray: [],
				items: [{
						value: 0,
						name: '星期天'
					},
					{
						value: 1,
						name: '星期一',
					},
					{
						value: 2,
						name: '星期二',
					},
					{
						value: 3,
						name: '星期三',
					},
					{
						value: 4,
						name: '星期四'
					},
					{
						value: 5,
						name: '星期五'
					},
					{
						value: 6,
						name: '星期六'
					}
				],
				distributionTime: [{
					name: "全部",
					value: 0
				}, {
					name: "工作日",
					value: 1
				}, {
					name: "休息日",
					value: 2
				}, {
					name: "单日",
					value: 3
				}, {
					name: "双日",
					value: 4
				}, {
					name: "自定义",
					value: 5
				}],
				index1: 0,
				index2: 0,
				kindArray: [],
				id: "",
				startTime: "", //开始时间
				endTime: "", //结束时间
				userName: "",
				userPhone: "",
				isDetail: false,
				user: "",
				userSite: "",
				selected: 0, //配送时间段
				isAPP: 0, //是否为app

				// 地址区域
				siteArea: "",

				// 预处理数据
				mkObj: {
					executeTime: "", //预处理开始时间
					incident: 0, // 执行事件
					endStop: "", //结束停止
					selected: 0,
					kindArray: []
				},
				beforehandArray: [], //预约处理数组
				selectedShow: false,
				checkboxArray: [],
				location: "",
				index: ""
			}
		},
		onLoad(option) {
			uniCloud.callFunction({
				name: "nai"
			}).then(res => {
				console.log(res);
				res.result.data.forEach(item => {
					this.array[0].push(item.name)
				})
			})

			let phone = uni.getStorageSync("phone");


			// 获取配送区域
			uniCloud.callFunction({
				name: "area",
				data: {
					phone: phone
				}
			}).then(res => {
				// 保存数据
				res.result.data.forEach(item => {
					this.siteArray.push(item.name)
				})
			})

			// let currentRoute = currentRoutes[currentRoutes.length - 1].route //获取当前页面路由
			this.id = option.isAdd
			this.location = option.location //需要插入的Id
			this.index = option.index //在哪插入


			this.isDetail = option.isDetail == 'true'
			uni.getStorage({
				key: "phone",
				success: (res) => {
					this.user = res.data
				}
			})
			this.init()
		},
		methods: {
			// 点击预处理按钮
			clickBtn() {
				this.visible = true

			},

			// 点击查看预处理
			clickBtnLook() {
				this.visibleLook = true
			},

			// 初始化
			init() {
				if (this.id == 'undefind') return
				uniCloud.callFunction({
					name: "pai_nai_detail",
					data: {
						_id: this.id
					}
				}).then(res => {
					console.log(res);
					let data = res.result.data[0]
					this.userName = data.userName
					this.userPhone = data.userPhone
					this.startTime = data.startTime
					this.endTime = data.endTime
					this.kindArray = data.kindArray
					this.userSite = data.userSite
					this.selected = data.selected
					this.isAPP = data.isAPP
					this.beforehandArray = data.beforehandArray //数组
					this.checkboxArray = data.checkboxArray
					this.siteArea = data.siteArea

					this.items.forEach(item => {
						if (this.checkboxArray.indexOf(item.value.toString()) != "-1") {
							item.checked = 'true'
						}
					})
				})


			},
			bindPickerChange(e) {
				console.log(e);
				this.index1 = e.detail.value[0]
				this.index2 = e.detail.value[1]
				if (this.index1 == 0 || this.index2 == 0) return
				this.kindArray.push({
					name: this.array[0][this.index1],
					number: this.array[1][this.index2]
				})
			},

			bindPickerChange1(e) {
				console.log(e);
				this.index1 = e.detail.value[0]
				this.index2 = e.detail.value[1]
				if (this.index1 == 0 || this.index2 == 0) return
				this.mkObj.kindArray.push({
					name: this.array[0][this.index1],
					number: this.array[1][this.index2]
				})
			},

			// 区域发生变化
			changeArea(val) {
				console.log(val , val.detail.value * 1 , this.siteArray[0]);
				this.siteArea = this.siteArray[val.detail.value * 1]
				console.log(this.siteArea);
			},

			// 删除已选种类
			del(index) {
				console.log("删除", index);
				let aaa = this.kindArray.splice(index, 1)
			},

			// 删除预处理事件
			delYY(index) {
				this.beforehandArray.splice(index, 1)
			},


			// 查看预处理事件
			lookYY(item, index) {
				// 关闭自己
				this.visibleLook = false
				// 开启他人
				this.visible = true
				// 变相赋值
				this.mkObj = item
				console.log(this.mkObj);
				console.log(item);
				// 告诉修改索引
				this.editYYIndex = index
				// 是否修改
				this.isEdit = true
			},

			// 选择日期  开始
			bindDateChange(e) {
				console.log(e);
				this.startTime = e.detail.value
			},

			// 预处理开始时间
			bindDateChangeExecute(e) {
				this.mkObj.executeTime = e.detail.value
			},


			// 结束
			bindDateChangeEnd(e) {
				this.endTime = e.detail.value
			},

			// 保存
			seaveOrEdit() {



				let parmse = {
					// userName: this.userName,
					// userPhone: this.userPhone,
					startTime: this.startTime,
					endTime: this.endTime,
					kindArray: this.kindArray,
					userId: this.user,
					userSite: this.userSite, //地址
					selected: this.selected, //配送时间段
					isAPP: this.isAPP,
					beforehandArray: this.beforehandArray, //数组
					checkboxArray: this.checkboxArray,
					typeName: [],
					siteArea:this.siteArea
				}

				this.kindArray.forEach(item => {
					parmse.typeName.push(item.name)
				})

				if (!this.startTime || !this.endTime || !this.userSite || this.kindArray.length == 0 || !this.siteArea) {
					uni.showToast({
						title: '请完善数据后重试',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'error',
						//显示持续时间为 2秒
						duration: 2000
					})
					return
				}


				// 新增
				if (this.id == 'undefind') {
					// 插入数据
					if (this.location || this.index) {
						console.log(this.location);
						console.log(this.index);
						// 统计加入次数
						let count = 1
						// 获取所有数据
						this.$showLoding("疯狂计算中...")
						uniCloud.callFunction({
							name: "pai_nai",
							data: {
								userId: this.user
							}
						}).then(res => {
							let indexLoc = 0
							// 查询该id在数据中的位置
							res.result.data.forEach((item, index) => {
								if (item._id == this.location && count == 1) {
									// 判断新增位置
									if (this.index == 1) {
										res.result.data.splice(index + 1, 0, parmse)
										// 在下方新增
									} else if (this.index == 0) {
										res.result.data.splice(index, 0, parmse)
									}
									count = 2
								}
							})
							// console.log(res.result.data);
							// 删除当前用户下的所有数据
							uniCloud.callFunction({
								name: "pai_nai_del",
								data: {
									userId: this.user
								}
							}).then(resdel => {
								if (resdel.result.code == 200) {
									// 新增数据
									uniCloud.callFunction({
										name: "pai_nai_add",
										data: res.result.data
									}).then(resAdd => {
										uni.showToast({
											title: '添加成功',
											//将值设置为 success 或者直接不用写icon这个参数
											icon: 'success',
											//显示持续时间为 2秒
											duration: 2000
										})
										this.$showLoding()
										uni.navigateBack({
											delta: 1, //返回层数，2则上上页
										})
									})
								}
							})
						})
					} else {
						// 整理参数
						uniCloud.callFunction({
							name: "pai_nai_add",
							data: parmse
						}).then(res => {
							uni.showToast({
								title: '添加成功',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'success',
								//显示持续时间为 2秒
								duration: 2000
							})
							uni.navigateBack({
								delta: 1, //返回层数，2则上上页
							})
						})
						// 郑家数据
					}


				} else {
					console.log(this.id, parmse);
					parmse._id = this.id
					// 修啊给i
					uniCloud.callFunction({
						name: "pai_nai_edit",
						data: parmse
					}).then(res => {
						console.log(res);
						if (res.result.code == 200) {
							uni.showToast({
								title: '修改成功',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'success',
								//显示持续时间为 2秒
								duration: 2000
							})
							uni.navigateBack({
								delta: 1, //返回层数，2则上上页
							})
						} else {
							uni.showToast({
								title: '修改失败',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})
						}

					})

				}
			},

			// 增加预事件
			addYClick() {
				if (this.mkObj.incident == 0 && this.mkObj.executeTime) {
					if (this.mkObj.endStop) {
						this.beforehandArray.push(this.mkObj)
						uni.showToast({
							title: '已添加',
							duration: 2000
						})
						this.visible = false
					} else {
						uni.showToast({
							title: '请补全信息',
							icon: "none",
							duration: 2000
						})
					}
				} else if (this.mkObj.incident == 1 && this.mkObj.executeTime) {
					if (this.mkObj.selected == 0 && this.mkObj.kindArray.length != 0) {
						this.beforehandArray.push(this.mkObj)
						uni.showToast({
							title: '已添加',
							duration: 2000
						})
						this.visible = false
					} else {
						uni.showToast({
							title: '请补全信息',
							icon: "none",
							duration: 2000
						})
					}
				} else {
					uni.showToast({
						title: '请选择开始时间',
						icon: "none",
						duration: 2000
					})
				}
			},
			checkboxChange(val) {
				console.log(val.detail.value);
				this.checkboxArray = val.detail.value
			},
			editYClick() {
				console.log(this.mkObj, this.editYYIndex);
				if (this.mkObj.incident == 0 && this.mkObj.executeTime) {
					if (this.mkObj.endStop) {
						this.beforehandArray[this.editYYIndex] = {
							...this.mkObj
						}
						console.log(this.beforehandArray[this.editYYIndex], "修改后的值");
						uni.showToast({
							title: '已修改',
							duration: 2000
						})
						this.visible = false
					} else {
						uni.showToast({
							title: '请补全信息',
							icon: "none",
							duration: 2000
						})
					}
				} else if (this.mkObj.incident == 1 && this.mkObj.executeTime) {
					if (this.mkObj.kindArray.length != 0) {
						this.beforehandArray[this.editYYIndex] = {
							...this.mkObj
						}
						uni.showToast({
							title: '已修改',
							duration: 2000
						})
						this.visible = false
					} else {
						uni.showToast({
							title: '请补全信息',
							icon: "none",
							duration: 2000
						})
					}
				} else {
					uni.showToast({
						title: '请选择开始时间',
						icon: "none",
						duration: 2000
					})
				}
			},
			// 选择配送时间
			radioChange(val) {
				this.selected = val.detail.value * 1
				console.log("改编了");
				if (this.selected == 5) {
					this.selectedShow = true
				}
			},

			// 预约先择配送时间
			radioChange1(val) {
				console.log(val);
				this.mkObj.selected = val.detail.value * 1
			},

			isAPPChange(val) {
				this.isAPP = val.detail.value * 1
			},

			//选择执行区间
			isincident(val) {
				// this.mkObj.incident = val.detail.value * 1
				this.mkObj = {
					executeTime: "", //预处理开始时间
					incident: val.detail.value * 1, // 执行事件
					endStop: "", //结束停止
					selected: 0,
					kindArray: []
				}
			},



			stopTime2(val) {
				this.mkObj.endStop = val.detail.value
			}
		}
	}
</script>

<style>
	.box {
		width: 100%;
		height: 100%;
		border-radius: 5px;
		padding: 0 10px;
		box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4);
		box-sizing: border-box;
	}

	.box input,
	.picker {
		width: 100%;
		height: 50px;
		border-bottom: 2px solid #eee;
		padding-left: 5px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		color: #333;
	}

	.box span {
		font-size: 1.2rem;
		color: #333;

	}

	.list {
		min-height: 120px;
		position: relative;
		padding: 0 10px;
	}

	.list li {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 40px;
		width: 100%;
		text-align: center;
		background-color: #fff;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
		margin: 10px 0;
		padding: 10px;
		box-sizing: border-box;
	}

	.list li span {
		font-size: 0.9rem !important;
	}

	.footer {
		width: 100%;
		height: 8%;
		margin-top: 10px;
		display: flex;
		justify-content: center;
		background-color: #fff;
		display: flex;
		align-items: center;
		box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4);
		border-radius: 10px;
	}

	.footer button {
		width: 80%;
		height: 80%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mark {
		height: 400px;
		overflow: scroll;
		box-sizing: border-box;
	}

	.mark ul {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		box-sizing: border-box;
	}

	.mark ul li {
		width: 97%;
		background-color: #fff;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
		padding: 10px;
		box-sizing: border-box;
		border-radius: 5px;
		margin: 10px;
		display: flex;
		justify-content: space-between;
	}

	/* 预处理样式 */
	.makeAnAppointment {
		height: 50px;
		width: 100%;
		display: flex;
		align-items: center;
		border-bottom: 2px solid #f0f0f0;
		color: #333;
	}

	.stopTime {
		margin-right: 10px;
		height: 40px;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 10px;
		margin-top: 20px;
		width: 100%;
		border: 1px solid #c1c1c1;
		display: flex;
		align-items: center;
	}

	.jiaBox {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
		height: 50%;
		overflow: scroll;
		border-radius: 30px;
		z-index: 99999999;
		background-color: #fff;
		transition: all 0.4s;
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.zhezhao {
		position: absolute;
		top: 0;
		z-index: 9999999;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
	}
</style>